<template>
  <el-dialog title="账单信息" :visible.sync="dialogFormVisible" width="90%">
    <el-card class="box-card" shadow="always">
      <div slot="header" class="clearfix">
        <el-row :gutter="20">
          <el-col :span="4">
            <span>账单编号：{{billinfo.billCode}}</span>
          </el-col>
          <el-col :span="5">
            <span>账单日期：{{billinfo.billDate}}</span>
          </el-col>
          <el-col :span="3">
            <span>账单人：{{billinfo.elderlyName}}</span>
          </el-col>
          <el-col :span="4">
            <span>账单金额：{{billinfo.billFee | money}}</span>
          </el-col>
          <el-col :span="4">
            <el-tag type="warning" v-if="billinfo.settle">已结算</el-tag>
            <el-tag type="info" v-else>未结算</el-tag>
          </el-col>
          <el-col :span="5">
            <span v-if="billinfo.settle">结算日期：{{ billinfo.settleTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
          </el-col>
        </el-row>
      </div>
      <div v-if="billinfo.billCode">
        <el-table
          :data="billinfo.details"
          border
          style="width: 100%">
          <el-table-column
            prop="nursingItemName"
            label="费用项目"
            width="180">
            <template slot-scope="scope">
              <span style="color: #ff8866" v-if="scope.row.type==2">
                {{scope.row.nursingItemName}}
              </span>
              <span v-else>
                {{scope.row.nursingItemName}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="executionCost"
            label="执行费用"
            width="180">
          </el-table-column>
          <el-table-column

            label="产生时间">
            <template>
            <span v-if="scope.row.recordedTime">{{scope.row.recordedTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="结算情况">
            <template slot-scope="scope">
              <span>
                <el-tag type="warning" v-if="scope.row.settled || scope.row.type==2">已结算</el-tag>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </el-dialog>

</template>

<script>
  import { parseTime} from "@/utils/index";
  import Template from "../../../nursing/template";
  export default {
    name: "",
      components: {Template},
      filters: {
      parseTime: parseTime,
      money(val)
      {
        val = (val+"").replace(/\$|\,/g, "");
        if (isNaN(val))
        {
          val = "0";
        }
        let sign = (val == (val = Math.abs(val)));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10)
        {
          cents = "0" + cents;
        }
        for (let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++)
        {
          val = val.substring(0, val.length - (4 * i + 3)) + "," + val.substring(val.length - (4 * i + 3));
        }

        return (((sign) ? "" : "-") + val + "." + cents);
      }
    },
    data() {
      return {
        dialogFormVisible: false,
        billinfo: {
          "billCode": undefined,
          "billDate": undefined,
          "billFee": undefined,
          "billTime": undefined,
          "checkInMark": undefined,
          "createTime": undefined,
          "creator": undefined,
          "del": undefined,
          "details": [],
          "disabled": undefined,
          "elderlyCode": undefined,
          "elderlyName": undefined,
          "id": undefined,
          "institutionName": undefined,
          "institutionNumber": undefined,
          "lastUpdateTime": undefined,
          "lastUpdator": undefined,
          "settle": undefined,
          "settleTime": undefined,
          "settlementSerialNumber": undefined,
          "version": undefined
        }
      }
    },
    methods: {
      show(billinfo){
        this.billinfo = billinfo
        this.dialogFormVisible = true
      },
    }
  }
</script>

<style scoped>
  .box-card >>> .el-input__inner {
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    /*outline: medium;*/
  }
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
